<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
      <title>floatz - Basic concepts example</title>
      <meta http-equiv="content-type" content="text/html; CHARSET=iso-8859-1" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <meta http-equiv="content-language" content="en" />
      <meta name="author" content="" />
      <meta name="robots" content="index,follow" />
      <meta name="description" content="" />
      <link rel="stylesheet" type="text/css" href="styles/project.css" />
      <script type="text/javascript" src="styles/floatz-1.1.2/scripts/jquery-1.7.2.min.js"></script>
      <script type="text/javascript" src="styles/floatz-1.1.2/scripts/floatz.js"></script>
      <script type="text/javascript" src="scripts/project.js"></script>
      <style type="text/css">
         .box1 {
            background: #cccccc;
         }
         .box2 {
            background: #aaaccc;
         }
         .box3 {
            background: #bbbccc;
         }
         .box4 {
            background: #cccccc;
         }
         .box5 {
            background: #dddccc;
         }
         .box6 {
            background: #eeeccc;
         }
         .box7 {
            background: #fffccc;
         }
      </style>
   </head>
   <body>
      <!-- page -->
      <div id="flz_page">
         <div class="flz_box box1">
            <div class="flz_spacer">
               <h1>Box 1</h1>
               <p>
                  Box content
               </p>
               <div class="flz_box flz_l50 box2">
                  <div class="flz_spacer">
                     <h1>Box 2</h1>
                     <p>
                        Box content
                     </p>
                     <div class="flz_box flz_l50 box4">
                        <div class="flz_spacer">
                           <h1>Box 4</h1>
                           <p>
                              Box content
                           </p>
                        </div>
                     </div>
                     <div class="flz_box flz_r50 box5">
                        <div class="flz_spacer">
                           <h1>Box 5</h1>
                           <p>
                              Box content
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="flz_box flz_r50 box3">
                  <div class="flz_spacer">
                     <h1>Box 3</h1>
                     <p>
                        Box content
                     </p>
                     <div class="flz_box flz_l50 box6">
                        <div class="flz_spacer">
                           <h1>Box 6</h1>
                           <p>
                              Box content
                           </p>
                        </div>
                     </div>
                     <div class="flz_box flz_r50 box7">
                        <div class="flz_spacer">
                           <h1>Box 7</h1>
                           <p>
                              Box content
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
